<script setup>
import { ref } from 'vue'
import TopTotal from '../components/TopTotal.vue'
import request from '../utils/request'
import YearLine from '../components/YearLine.vue';
import ClassSalary from '../components/ClassSalary.vue';
import GroupChart from '../components/GroupChart.vue';
import GenderData from '../components/GenderData.vue';
import ProvinceData from '../components/ProvinceData.vue';

const overview = ref({})
const yearLine = ref([])
const salaryData = ref([])
const groupData = ref([])
const genderData = ref([])
const provinceData = ref([])
const loadData = async () => {
  const { data } = await request.get('dashboard')
  console.log(data)
  // 0 顶部的概述
  overview.value = data.overview
  // 1-1历史数据
  yearLine.value = data.year
  // 1-2班级薪资分布
  salaryData.value = data.salaryData

  // 2
  groupData.value = data.groupData

  // 3-1 性别
  genderData.value = data.salaryData

  provinceData.value = data.provinceData
}

loadData()

const mockData = () => {
  return [
    '1万以下', 
    '1-1.5万以下', 
    '1.5-2万以下',
    '2万以上'].map(item => {
      return {
        label: item,
        g_count: Math.ceil(Math.random()*100),
        b_count: Math.ceil(Math.random()*100)
      }
    })
}

const changeProvince = (obj) => {
  console.log(obj)
  genderData.value = mockData()
}
</script>
<template>
  <div class="application  application-offset  sidenav-pinned ready">
  <div class="container-fluid container-application">
    <div class="page-content">
        <!-- Page Title -->
        <div class="page-title">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
              <span class="text-sm text-white opacity-8">黑马前端100期</span>
            </div>
          </div>
        </div>
        <!-- charts -->
        <div class="row">
          <TopTotal :overview="overview"/>
        </div>
        <div class="row">
          <div class="col col-xl-8">
            <YearLine :yearLine="yearLine"></YearLine>
          </div>
          <div class="col col-xl-4">
            <ClassSalary :salaryData="salaryData"></ClassSalary>
          </div>
          <div class="col col-xl-8">
            <ProvinceData
            @changeProvince="changeProvince"
            :provinceData="provinceData"></ProvinceData>
          </div>
          <div class="col col-xl-4">
            <GenderData :genderData="genderData"></GenderData>
          </div>
          <div class="col col-xl-12">
            <div class="card" style="height: 400px">
              <GroupChart :groupData="groupData"></GroupChart>
            </div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2023 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>